/* 字体大小 */
.font14{
    font-size: 14px;
}
.font16{
    font-size: 16px;
}
.font40{
    font-size: 40px;
}
/* 字体颜色 */
.pink{
    color:#e7669d;
}
.green{
    color:#55e363;
}
.red{
    color: red;
}
/* 字体加粗 */
.fontBold{
    font-weight:bold;
}
/* 边距 */
.mleft5{
    margin-left: 8px;
}
.mbottom5{
    margin-bottom: 5px;
}
html,body{
    height: 100%;
}
body{
    display: flex;
    flex-direction:column;
    background-color: #f4f4f4;
}
.main{
    flex: 1;
    overflow-y: scroll;
}


/* 底线 bottom-line */
.bottom-line{
    display: flex;
    justify-content:space-around;
    align-items:center;
    height: 20px;
}
.bottom-line .line{
    flex: 1;
    border-bottom:1px solid #ccc;
}
/* .底部 */
/* flex布局需要加在父级 */
.footer ul{
    width: 100%;
    height: 40px;
    display: flex;
    justify-content:space-around;
    background-color: #ffff;
    /* 主轴已经center，那么我们侧轴想要center的话就得用align-items */

}
.footer ul li{
    margin-top: 5px;
    text-align: center;
    /*这个很重要，能让字和图标对齐  */

}
.footer ul li a span{
    color: #ccc;
 
}
.footer ul li a p{
    color: #ccc;

}
.footer ul li a.active span,.footer ul li a.active p{
    /* 
    <a class="active"></a> 
    所以：类选择器这么写才有效果 a.active 而不是a .active
    */
    color: red;
}

